<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen"/>


    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen"/>

    <!-- GOOGLE FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

</head>


<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

<!--<article class="prevnext"><a href="02.Sample-Fullwidth.html">Next Guide <i class="revicon-right-open"></i> </a></article>-->
<article class="prevnext">
    <a class="" href="01.Sample-Boxed.html">01</a>
    <a class="" href="02.Sample-Fullwidth.html">02</a>
    <a class="" href="03.Sample-FullScreen.html">03</a>
    <a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
    <a class="" href="05.Sample-Aligns.html">05</a>
    <a class="" href="06.Sample-AlignForce.html">06</a>
    <a class="" href="07.Sample-Videos.html">07</a>
    <a class="" href="08.Sample-NavigationStyle.html">08</a>
    <a class="" href="09.Sample-Api.html">09</a>
    <a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
    <a class="" href="11.Sample-Shuffle.html">11</a>
    <a class="" href="12.Sample-Backgrounds.html">12</a>
    <a class="" href="13.Sample-HideCaptions.html">13</a>
    <a class="" href="14.Sample-KenBurns.html">14</a>
    <a class="" href="15.Sample-VideoBG.html">15</a>
    <a class="" href="16.Caption-ShowDown.html">16</a>
    <a class="" href="17.Sample-DottedBG.html">17</a>
    <a class="active" href="18.Sample-NewCaptionEffects.html">18</a>
</article>
<!-- HEADER -->
<header>
    <section class="container">
        <article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq">
            <div class="logo"></div>
        </a></article>
        <div class="button-holder"><a
                href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank"
                class="button"><strong>BUY NOW</strong></a></div>
        <div style="clear:both"></div>
    </section>
</header> <!-- END OF HEADER -->


<article class="boxedcontainer">

    <!--
    #################################
        - THEMEPUNCH BANNER -
    #################################
    -->
    <div class="tp-banner-container">
        <div class="tp-banner">
            <ul>    <!-- SLIDE  -->


                <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" data-delay="5000">
                    <!-- MAIN IMAGE -->
                    <img src="images/slidebg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top"
                         data-bgrepeat="no-repeat">


                    <!-- LAYERS -->
                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption big_dark customin customout"
                         data-x="center"
                         data-y="200"
                         data-captionhidden="on"


                         data-splitin="words"
                         data-elementdelay="0.25"
                         data-start="200"
                         data-speed="600"
                         data-easing="Back.easeOut"
                         data-customin="x:0;y:-20;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"


                         data-frames="{ typ :lines;
									 elementdelay :0.1;
									 start:1650;
									 speed:500;
									 ease:Power3.easeOut;
									 animation:x:0;y:-40;z:0;rotationX:00;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
									 },
									 { typ :lines;
									 elementdelay :0.1;
									 start:2150;
									 speed:500;
									 ease:Power3.easeOut;
									 animation:x:0;y:-20;z:0;rotationX:00;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
									 },
									 {
									 elementdelay :0.1;
									 start:3200;
									 speed:500;
									 ease:Power3.easeOut;
									 animation:x:-240;y:13;z:0;rotationX:0;rotationY:0;rotationZ:90;scaleX:0.12;scaleY:0.12;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
									 },

									 {typ:chars;
									 elementdelay :0.1;
									 start:4000;
									 speed:1500;
									 ease:Power3.easeInOut;
									 animation:x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:720;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
									 }
									 "

                         data-splitout="words"
                         data-endelementdelay="0.1"
                         data-customout="x:0;y:0;z:0;rotationX:40;rotationY:70;rotationZ:0;scaleX:0.85;scaleY:0.85;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-endspeed="500"
                         data-endeasing="Power4.easeIn"

                         style="z-index: 4">SLIDER REVOLUTION
                    </div>


                    <div class="tp-caption medium_dark customin customout"
                         data-x="center"
                         data-y="260"

                         data-splitin="chars"
                         data-elementdelay="0.05"
                         data-start="600"
                         data-speed="600"
                         data-easing="Back.easeOut"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"

                         data-frames="{ typ :lines;
									 elementdelay :0.1;
									 start:1650;
									 speed:500;
									 ease:Power3.easeOut;
									 animation:x:0;y:-40;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
									 },
									 { typ :lines;
									 elementdelay :0.1;
									 start:2150;
									 speed:500;
									 ease:Power3.easeOut;
									 animation:x:0;y:-20;z:0;rotationX:00;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
									 }
									 "


                         data-splitout="lines"
                         data-endelementdelay="0.1"
                         data-customout="x:-230;y:-20;z:0;rotationX:0;rotationY:0;rotationZ:90;scaleX:0.2;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%"
                         data-endspeed="500"
                         data-end="3200"
                         data-endeasing="Back.easeIn"
                         data-captionhidden="on"
                         style="z-index: 4">TYPOGRAPHY
                    </div>

                    <div class="tp-caption medium_dark customin customout"
                         data-x="center"
                         data-y="250"

                         data-splitin=""
                         data-elementdelay=""
                         data-start="1600"
                         data-speed="600"
                         data-easing="Power3.easeOut"
                         data-customin="x:0;y:30;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"

                         data-frames="{ typ :lines;
									 elementdelay :0.1;
									 start:2150;
									 speed:500;
									 ease:Power3.easeOut;
									 animation:x:0;y:-20;z:0;rotationX:00;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;
									 }"

                         data-splitout="lines"
                         data-endelementdelay="0.1"
                         data-customout="x:-230;y:-20;z:0;rotationX:0;rotationY:0;rotationZ:90;scaleX:0.2;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%"
                         data-endspeed="500"
                         data-end="3200"
                         data-endeasing="Back.easeIn"
                         data-captionhidden="on"
                         style="font-size:60px;line-height:60px;font-weight:300;letter-spacing:0px;">UNLIMITED
                        POSSIBILITIES
                    </div>

                    <div class="tp-caption medium_dark customin customout"
                         data-x="center"
                         data-y="270"

                         data-splitin=""
                         data-elementdelay=""
                         data-start="2150"
                         data-speed="600"
                         data-easing="Power3.easeOut"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 100%;"

                         data-splitout="lines"
                         data-endelementdelay="0.1"
                         data-customout="x:-230;y:-20;z:0;rotationX:0;rotationY:0;rotationZ:90;scaleX:0.2;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%"
                         data-endspeed="500"
                         data-end="3200"
                         data-endeasing="Back.easeIn"
                         data-captionhidden="on"
                         style="font-size:55px;line-height:55px;font-weight:400;letter-spacing:0px;">go and grab it
                        today
                    </div>


                    <div class="tp-caption medium_dark customin customout"
                         data-x="center"
                         data-y="150"

                         data-splitin="chars"
                         data-elementdelay="0.1"
                         data-start="2150"
                         data-speed="1500"
                         data-easing="Power3.easeOut"
                         data-customin="x:350;y:200;z:0;rotationX:0;rotationY:0;rotationZ:-120;scaleX:8;scaleY:8;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:220% 190%;"

                         data-splitout="lines"
                         data-endelementdelay="0"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:640;scaleX:10;scaleY:10;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-end="4000"
                         data-endspeed="1500"
                         data-endeasing="Power3.easeInOut"
                         data-captionhidden="on"
                         style="font-size:155px;line-height:155px;font-weight:300;letter-spacing:0px;">S mplified
                    </div>

                </li>


                <!-- SLIDE -->
                <li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-delay="999999">
                    <!-- MAIN IMAGE -->
                    <img src="images/transparent.png" alt="slidebg1" style="background-color:rgb(45,49,54)"
                         data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                    <!-- LAYERS -->

                    <div class="tp-caption huge_red customin customout"
                         data-x="200"
                         data-y="225"

                         data-splitin="chars"
                         data-elementdelay="0.05"
                         data-start="700"
                         data-speed="600"
                         data-easing="Back.easeOut"
                         data-customin="x:-40;y:-30;z:0;rotationX:0;rotationY:0;rotationZ:-70;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"


                         data-splitout=""
                         data-endelementdelay="0"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:190;rotationZ:0;scaleX:10;scaleY:10;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-end="90000"
                         data-endspeed="1500"
                         data-endeasing="Power3.easeInOut"
                         data-captionhidden="on"
                         style="z-index:5"
                    >CUSTOMIZED
                    </div>

                    <div class="tp-caption middle_yellow customin customout"
                         data-x="210"
                         data-y="180"

                         data-splitin="chars"
                         data-elementdelay="0.1"
                         data-start="500"
                         data-speed="300"
                         data-easing="Power3.easeOut"
                         data-customin="x:0;y:30;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:0.4;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 20%;"


                         data-splitout="lines"
                         data-endelementdelay="0"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:640;scaleX:10;scaleY:10;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-end="90000"
                         data-endspeed="1500"
                         data-endeasing="Power3.easeInOut"
                         data-captionhidden="on"
                    >READY TO
                    </div>

                    <div class="tp-caption middle_yellow customin customout"
                         data-x="705"
                         data-y="180"

                         data-splitin="chars"
                         data-elementdelay="0.07"
                         data-start="900"
                         data-speed="300"
                         data-easing="Power3.easeOut"
                         data-customin="x:0;y:30;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:0.4;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 20%;"


                         data-splitout="lines"
                         data-endelementdelay="0"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:640;scaleX:10;scaleY:10;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-end="90000"
                         data-endspeed="1500"
                         data-endeasing="Power3.easeOut"
                         data-captionhidden="on"
                    >EXAMPLES
                    </div>

                    <div class="tp-caption huge_thin_yellow customin customout"
                         data-x="485"
                         data-y="145"

                         data-splitin="chars"
                         data-elementdelay="0.2"
                         data-start="700"
                         data-speed="800"
                         data-easing="Power3.easeOut"
                         data-customin="x:0;y:30;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 20%;"


                         data-splitout="lines"
                         data-endelementdelay="0"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:640;scaleX:10;scaleY:10;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-end="90000"
                         data-endspeed="1500"
                         data-endeasing="Power3.easeInOut"
                         data-captionhidden="on"
                    >use
                    </div>


                </li>


            </ul>
            <div class="tp-bannertimer"></div>
        </div>
    </div>

    <!-- THE SCRIPT INITIALISATION -->
    <!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
    <script type="text/javascript">

        var revapi;

        jQuery(document).ready(function () {

            revapi = jQuery('.tp-banner').revolution(
                {
                    delay: 9000,
                    startwidth: 1170,
                    startheight: 500,
                    hideThumbs: 10

                });

        });	//ready

    </script>

    <!-- END REVOLUTION SLIDER -->


</article><!-- Content End -->


</body>